<template>
  <div class="hs-panel">
  </div>
</template>

<script>

let charts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')
export default {
  name: 'dashboard',
  components: {},
  data () {
    return {
      userTotal: undefined,
      visitorTotal: undefined,
      visitorStudentTotal: undefined
    }
  },
  mounted () {
    setTimeout(() => {
    }, 500)
  },
  methods: {
    setLineChart (id, color, data) {
      console.log(data)
      let myChart = charts.init(document.getElementById(id))
      let option = {
        // legend: {},
        tooltip: {},
        color: [ color ],
        dataset: {
          // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
          // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
          dimensions: ['date', 'count'],
          source: data
        },
        xAxis: {
          type: 'category',
          axisLabel: { rotate: -45 }
        },
        yAxis: {
          minInterval: 1
        },
        series: [
          { type: 'line',
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
  .line-chart {
    width: 540px;
    height: 360px;
    margin: auto;
  }
  .panel-title {
    margin-top: 2rem;
  }
</style>
